<template>
  <view class="menu-content-counter">
    <view
      class="first-menu-items"
      v-for="item in firstList"
      :key="item.id"
      @click="handleSelectFirstMenu(item)"
    >
      <view class="first-menu-connect">
        <view class="left-title">
          <u-icon
            :name="
              selectFirstId == item.id ? 'arrow-up-fill' : 'arrow-down-fill'
            "
            :color="selectFirstId == item.id ? '#3376cd' : '#888'"
            size="12"
          ></u-icon>
          <text :class="{ active: selectFirstId == item.id }">{{
            item.name
          }}</text>
        </view>
        <view class="first-add-flag" v-show="item.type">新增</view>
      </view>
      <view v-if="selectFirstId == item.id" class="two-menu-main">
        <view
          class="two-menu-text"
          :class="{ active: selectChildId == child.id }"
          v-for="child in childList"
          :key="child.id"
          @click.stop="handleSelectChild(child)"
          >{{ child.name }}</view
        >
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      firstList: [
        {
          id: "1",
          name: "家具",
          type: 1,
          children: [
            {
              id: "11",
              name: "儿童家具",
            },
            {
              id: "12",
              name: "沙发勒类",
            },
            {
              id: "13",
              name: "桑拿房",
            },
            {
              id: "14",
              name: "桌类",
            },
            {
              id: "15",
              name: "办公家具",
            },
          ],
        },
        {
          id: "2",
          name: "锁类",
          type: 0,
          children: [
            {
              id: "21",
              name: "普通锁",
            },
            {
              id: "22",
              name: "其他锁",
            },
            {
              id: "23",
              name: "智能锁",
            },
          ],
        },
      ],
      childList: [],
      selectFirstId: "",
      selectChildId: "",
    };
  },
  mounted() {
    this.selectFirstId = this.firstList?.[0]?.id;
    this.childList = this.firstList?.[0]?.children;
    this.selectChildId = this.childList?.[0]?.id;
  },
  methods: {
    // 选中第一级
    handleSelectFirstMenu(item) {
      this.selectFirstId = item.id;
      this.childList = item.children;
      this.selectChildId = this.childList?.[0]?.id;
    },
    // 选中第二季
    handleSelectChild(child) {
      this.selectChildId = child?.id;
    }
  },
};
</script>

<style lang="scss" scoped>
.menu-content-counter {
  padding: 12rpx 14rpx;
  box-sizing: border-box;
  .first-menu-items {
    .first-menu-connect {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12rpx 0;
      .left-title {
        display: flex;
        align-items: center;
        gap: 10rpx;
        text {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
          &.active {
            color: #3376cd;
          }
        }
      }
      .first-add-flag {
        padding: 2rpx 4rpx;
        font-size: 20rpx;
        color: #fff;
        background: #ed6e5b;
        border-radius: 8rpx;
      }
    }
    .two-menu-main {
      font-size: 24rpx;
      color: #666;
      .two-menu-text {
        padding: 12rpx 0 12rpx 60rpx;
        &.active {
          color: #3376cd;
        }
      }
    }
  }
}
</style>
